<!--  -->
<template>
    <div>
<!--内容-->
<div class="m-container animated fadeIn">
    <div class="ui container m-pad-tb-big m-opacity">
        <div class="ui top attached segment">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <h4 class="ui teal header">分类</h4>
                </div>
                <div class="right aligned column">
                    共 <h3 class="ui orange header m-inline-block m-text-thin">{{types.length}}</h3> 个
                </div>
            </div>
        </div>
        <div class="ui bottom attached segment m-pad-tb-large ">
            <div class="ui labeled button m-margin-tb-tiny m-margin-lf" v-for="type in types" :key="type.id">
                <div class="ui basic  button" :id="type.id" @click="getShowBlogs(type.id)">{{type.name}}</div>
                <div class="ui basic  left pointing label" :id="type.id+'Length'" @click="getShowBlogs(type.id)">{{type.blogs.length}}</div>
            </div>
        </div>

        <!--content-->
        <div class="ui padded segment m-pad-tb-large m-pad-lr-large" v-for="blog in blogs" :key="blog.id">
            <div class="ui grid stackable mobile reversed">
                <div class="nine wide column" >
                    <h3 class="ui header m-text-large" ><router-link class="m-a-head" :to="'/blog/'+blog.id">{{blog.title}}</router-link></h3>
                    <p class="m-text">{{blog.description+"..."}}</p>
                    <div class="ui grid ">
                        <div class="eleven wide column">
                            <div class="ui horizontal link list">
                                <div class="item">
                                    <i class="calendar icon"></i><span>{{blog.updateTime | formatDate("YYYY-MM-DD")}}</span>
                                </div>
                                <div class="item">
                                    <i class="eye icon"></i><span>{{blog.views}}</span>
                                </div>
                                <div class="item">
                                    <i class="comment outline icon"></i><span>{{blog.commentCount}}</span>
                                </div>
                            </div>
                        </div>

                        <div class="five wide column right aligned ">
                            <div class="ui label teal basic m-text-thin">{{blog.type.name}}</div>
                        </div>
                    </div>
                </div>

                <div class="seven wide column middle aligned ">
                    <router-link :to="'/blog/'+blog.id"><img src="../../assets/images/14.png"  class="ui rounded image scrollLoading"></router-link>
                </div>
            </div>
        </div>
        <!--footer-->
        <div class="ui bottom attached segment ">
            <div class="ui center aligned middle alignedstackable " align="center">
                <p class="m-text-spaced-max" >1/1</p>
            </div>
        </div>
    </div>
</div>
<br>
<br>
<br>

    </div>
</template>

<script>
export default {
    data () {
        return {
            types:"",
            blogs:"",
            typeId:-1,
            ImgDomainName:this.$ImgDomainName
        };
    },
    methods:{
        getShowBlogs(typeId){
            var _this = this
            _this.axios.get("/getShowBlogsByTypeId",{
                params:{
                    typeId:typeId
                }
            }).then(res=>{
                _this.blogs=res.data.blogs
                //使type图标高亮
                $('#'+_this.typeId).removeClass('teal')
                $('#'+_this.typeId+"Length").removeClass('teal')
                _this.typeId = typeId
                $('#'+_this.typeId).addClass('teal')
                $('#'+_this.typeId+"Length").addClass('teal')
                //滑动到页面顶端
                $(window).scrollTo(0,200)
                this.$nextTick(()=>{
                    $(".scrollLoading").scrollLoading()
                })
            }).catch(e=>{
                console.log(e)
            })
        }
    },
    created(){
        var _this = this
        _this.axios.get("/getAllTypes")
        .then(res=>{
            if(res.data.status ===200){
                _this.types = res.data.types
                _this.getShowBlogs(_this.types[0].id)
            }else{
                _this.$router.push({path:"/404"})
            }
        }).catch(e=>{  
            console.log(e)
        })
    }
}

</script>
<style lang='scss' scoped>
</style>